<template>
    <div>
        <!-- 面包屑导航条 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>课程管理</el-breadcrumb-item>
          <el-breadcrumb-item>课程管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card class="box-card">
          <el-form :model="searchForm" class="demo-form-inline" >
            <el-form-item>
              <el-input style="width:150px;height:30px;"  placeholder="课程标题" v-model="searchForm.courseName"></el-input>
              <el-select  style="width:150px;height:30px; margin-left: 10px"  v-model="searchForm.courseStatus" placeholder="选择状态">
                <el-option label="未发布" :value="0"></el-option>
                <el-option label="上架" :value="1"></el-option>
                <el-option label="下架" :value="2"></el-option>
              </el-select>
              <el-input style="width:150px;height:30px; margin-left: 10px"  placeholder="专业" v-model="searchForm.categoryParentId"></el-input>
<!--              <el-date-picker style="width:200px;height:30px; margin-left: 10px"  placeholder="开始创建日期" type="date" v-model="searchForm.pubTime"></el-date-picker>- -->
<!--              <el-date-picker style="width:150px;height:30px;"  placeholder="结束创建日期" type="date" v-model="searchForm.expiryTime"></el-date-picker>-->
              <el-button @click="searchList" style="margin-left: 10px" plain type="info">搜索</el-button>
              <el-button @click="searchEmpty" plain type="info">清空</el-button>
              <el-button @click="courseFormVisible=true" type="primary">创建课程</el-button>
            </el-form-item>
          </el-form>

          <el-table
            :data="courseList"
            stripe
            style="width: 100%">
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              label="课程Logo" width="120">
              <template slot-scope="scope">
                <img  v-if="scope.row.courseLogo!=null" :src="'/api/education-course/base/download/'+scope.row.courseLogo" width="50px" height="50px">
              </template>
            </el-table-column>
            <el-table-column
              label="课程名"
              prop="courseName"
              width="120">
            </el-table-column>
            <el-table-column
              label="状态"
              prop="courseStatus"
              width="120">
              <template slot-scope="scope">
                {{scope.row.courseStatus | courseStatusFit}}
              </template>
            </el-table-column>
            <!--<el-table-column
              label="专业"
              prop="categoryChildId"
              width="120">
            </el-table-column>-->
            <el-table-column
              label="课程价格"
              width="120">
              <template slot-scope="scope">
                ${{scope.row.price}}
              </template>
            </el-table-column>
            <el-table-column
              label="课时"
              prop="lessionNum"
              width="120">
            </el-table-column>
            <el-table-column
              label="浏览量"
              prop="pageViewcount"
              width="120">
            </el-table-column>
            <el-table-column
              label="创建日期"
              width="120">
              <template slot-scope="scope">
                {{scope.row.pubTime | dateFit('YYYY/MM/DD')}}
              </template>
            </el-table-column>
            <el-table-column
              label="有效结束时间"
              width="150">
              <template slot-scope="scope">
                <span v-if ="scope.row.expiryMode==1">{{scope.row.expiryDays | expiryDaysFit}}</span>
                <span v-if ="scope.row.expiryMode==2">{{scope.row.expiryTime | dateFit('YYYY/MM/DD')}}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作">
              <template slot-scope="scope">
                <el-button @click="chapter(scope.row.id)" size="small" type="text">章节管理</el-button>
                <el-button @click="updateStatus(scope.row.id,1)" v-if="scope.row.courseStatus==0  || scope.row.courseStatus==2" size="small" type="text">上架</el-button>
                <el-button @click="updateStatus(scope.row.id,2)" v-if="scope.row.courseStatus==1" size="small" type="text">下架</el-button>
                <el-button @click="getCourse(scope.row.id)" v-if="scope.row.courseStatus==0  || scope.row.courseStatus==2" size="small" type="text">修改</el-button>
                <el-button @click="delCourse(scope.row.id)" v-if="scope.row.courseStatus==0  || scope.row.courseStatus==2" size="small" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page.currentPage"
            :page-size="page.pageSize"
            :page-sizes="[5, 10, 20, 40]"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>

          <el-dialog  :append-to-body=true :close-on-click-modal="false" :title="courseForm.id==null?'添加课程':'编辑课程'" :visible.sync="courseFormVisible"
                     @closed="crearUserForm"> <!--课程表单框 -->
            <el-form :model="courseForm" label-width="100px" label-position="5px" ref="courseForm" :rules="rules">
              <el-row :gutter="22">
                <el-col :span="8">
                  <el-form-item label="课程名称" prop="courseName" >
                    <el-input  v-model="courseForm.courseName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="专业分类" prop="categoryParentId">
                    <el-select v-model="courseForm.categoryParentId" @change="getParentById(courseForm.categoryParentId)" placeholder="请选择">
                      <el-option
                        v-for="item in parentList"
                        :label="item.childName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item v-if="this.courseForm.categoryParentId!=null">
                    <el-select v-model="courseForm.categoryChildId" placeholder="请选择">
                      <el-option
                        v-for="item in childList"
                        :label="item.childName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="22">
                <el-col :span="8">
                  <el-form-item label="总课时" prop="lessionNum" size="small">
                    <el-input-number v-model="courseForm.lessionNum"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="课程价格" prop="price">
                    <el-input-number v-model="courseForm.price" size="small"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="浏览量" prop="pageViewcount" size="small">
                    <el-input-number v-model="courseForm.pageViewcount"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="22">
                <el-col :span="8">
                  <el-form-item label="有效期类型" prop="expiryMode">
                    <el-select v-model="courseForm.expiryMode" placeholder="请选择">
                      <el-option label="天数" :value="1"></el-option>
                      <el-option label="截止时间" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="courseForm.expiryMode==1">
                  <el-form-item label="按天数" prop="expiryDays">
                    <el-input v-model="courseForm.expiryDays">天</el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8"  v-if="courseForm.expiryMode==2" >
                  <el-form-item label="截止时间" prop="expiryTime">
                    <el-date-picker type="date" v-model="courseForm.expiryTime"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="22">
                <!--<el-col :span="8">
                  <el-form-item label="销售数量" prop="pageViewcount">
                    <el-input v-model="courseForm.pageViewcount"></el-input>
                  </el-form-item>
                </el-col>-->
                <!--<el-col :span="8">
                  <el-form-item label="状态" prop="courseStatus">
                    <el-select v-model="courseForm.courseStatus" placeholder="请选择">
                      <el-option label="上架" :value="1"></el-option>
                      <el-option label="下架" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>-->
                <el-col :span="8">
                  <el-form-item label="添加讲师" prop="teacherId">
                    <el-select v-model="courseForm.teacherId" placeholder="请选择">
                      <el-option
                        v-for="item in teacherList"
                        :label="item.fullName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="课程标题" prop="courseTitle">
                    <el-input v-model="courseForm.courseTitle"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="22">
                <el-col :span="11">
                  <el-form-item label="课程图片">
                    <el-upload
                      class="avatar-uploader"
                      action="/api/education-course/base/upload"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="courseForm.courseLogo!=null" :src="'/api/education-course/base/download/'+courseForm.courseLogo" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="课程详情" prop="courseContent">
                    <el-input
                      type="textarea"
                      :rows="10"
                      placeholder="请输入内容"
                      v-model="courseForm.courseContent">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="dialog-footer" slot="footer">
              <el-button @click="courseFormVisible = false">取 消</el-button>
              <el-button @click="saveCourse" type="primary">确 定</el-button>
            </div>
          </el-dialog>

        </el-card>
    </div>
</template>

<script>
    export default {
      name: "Couse",
      data() {
        return {
          searchForm: {},
          page: {
            currentPage: 0,
            pageSize: 5
          },
          total: 0,
          courseList:[],
          courseFormVisible: false,
          rules:{
            courseName: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
            categoryParentId: [{ required: true, message: '请选择专业', trigger: 'blur' }],
            categoryChildId: [{ required: true, message: '请选择专业', trigger: 'blur' }],
            lessionNum: [{ required: true, message: '请输入总课时'}, { type: 'number', message: '总课时必须为数字值'}],
            price: [{ required: true, message: '请输入课程价格'}, { type: 'number', message: '课程价格必须为数字值'}],
            pageViewcount: [ { required: true, message: '请输入浏览量'}, { type: 'number', message: '浏览量必须为数字值'}],
            expiryMode: [{ required: true, message: '请选择有效类型', trigger: 'blur' }],
            expiryDays: [{ required: true, message: '请输入有效天数', trigger: 'blur' }],
            expiryTime: [{ required: true, message: '请输入有效结束时间', trigger: 'blur' }],
            teacherId: [{ required: true, message: '请选择添加的讲师', trigger: 'blur' }],
            courseStatus: [{ required: true, message: '请输入课程状态', trigger: 'blur' }],
            courseTitle: [{ required: true, message: '请输入课程简介', trigger: 'blur' }],
            courseContent: [{ required: true, message: '请输入课程详情', trigger: 'blur' }]
          },
          courseForm: {courseLogo:null,categoryChildId:null},
          parentList:[],
          teacherList:[],
          childList:[],
          userRoleVisible:false,
          userId:null,
          userFullName:'',
          roleIds:[],
          roleList:[],
          auth:{token:null},
          childName:null
        }
      },
      methods: {
        updateStatus:function(id,status){
          this.$http.post("education-course/base/updateState/"+id+"/"+status).then((res)=>{
            this.$message.success(res.data.message);
            this.searchList();
          })
        },
        handleAvatarSuccess(res, file) {//上传完成后回调
          this.courseForm.courseLogo = res.result.path
        },
        beforeAvatarUpload(file) {//=,=== 和 == 比较的是内容
          const isJPG = file.type === 'image/jpeg'|| file.type === 'image/png'
          const isLt2M = file.size / 1024 / 1024 < 2

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
          }
          return isJPG && isLt2M
        },
        getCourse: function (id) {//查询当前id的课程
          this.$http.get("education-course/base/findCourse/" + id).then((res) => {
            if (res.data.success) {
              this.courseForm = res.data.result //赋值
              this.courseFormVisible = true //显示dialog框
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        chapter:function(id){//章节管理
          this.$router.push("Chapter?id="+id);
        },
        crearUserForm: function () {//清空数据
          this.courseForm = {}
        },
        saveCourse: function () { //课程保存
          this.$refs['courseForm'].validate((valid) => {
            if (!valid) {
              return
            }

            if(this.courseForm.id==null){
              var userId = JSON.parse(sessionStorage.getItem("user")).id
              this.$http.post("education-course/base/addCourse/"+userId, this.courseForm).then((res) => {
                //如何提示
                if (res.data.success) {
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  })
                } else {
                  this.$message.error(res.data.message)
                }
              })
            }else{
              this.$http.post("education-course/base/updateCourse", this.courseForm).then((res) => {
                //如何提示
                if (res.data.success) {
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  })
                } else {
                  this.$message.error(res.data.message)
                }

              })
            }
            //关闭dialog框
            this.courseFormVisible = false
            //重新加载列表
            this.searchList()
          })

        },
        getParentById:function(id){//根据一级分类选择二级分类
          this.courseForm.categoryChildId  = ''
          // this.childList = []
          this.$http.get("education-course/base/childList/"+id).then((res)=>{
            this.childList = res.data.result
          })
        },
        teacherForm:function(){//讲师列表
          this.$http.get("education-user/eduTeacher/teacherList").then((res)=>{
            this.teacherList = res.data.result
          })
        },
        parentForm:function(){//专业一级分类列表
          this.$http.get("education-course/base/parentList").then((res)=>{
            this.parentList = res.data.result
          })
        },
        delCourse:function (id) {//删除课程
          this.$http.get("education-course/base/deleteCourseBase/"+id).then((res)=>{
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        searchEmpty:function(){//清空
          this.searchForm = {}
        },
        handleSizeChange: function (val) {
          this.page.pageSize = val
          this.searchList()
        },
        handleCurrentChange: function (val) {
          this.page.currentPage = val
          this.searchList()
        },
        searchList: function () {//课程列表
          this.$http.post("education-course/base/list/" + this.page.currentPage + "/" + this.page.pageSize, this.searchForm).then((res) => {
            this.courseList = res.data.result.list
            this.total = res.data.result.total
          })
        },
        categoryChildId:function(val){
          this.$http.get("education-course/category/get/" + val).then((res) => {//当前节点
             this.childName = res.data.result.childName
          })
        },
      },
      filters: {
        expiryDaysFit: function (v1) {
          return "购买后"+v1+"天"
        },
        courseStatusFit: function(val){
          if(val==1) return "上架"
          if(val==2) return "下架"
          if(val==0) return "未发布"
        }
      },
      mounted() {

        this.searchList()//列表展示
        this.parentForm()//专业展示
        this.teacherForm()//讲师展示


      },
      /*watch:{
        'courseForm.categoryParentId':function (val) {
          this.courseForm.categoryChildId  = ''
          this.$http.get("education-course/base/childList/"+val).then((res)=>{

            this.childList = res.data.result
          })
        }
      }*/
    }
</script>

<style scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
